import QtQuick 2.0
import QtQuick.Window 2.1

Rectangle {
    id: control_widget
    width: 800
    height: 60

    property bool is_play_btn_visible: true

    property int left_margin: 5
    property int right_margin: 5
    property int offsetx
    property int offsety

    property bool mute_btn_enter: false
    property bool volume_slider_enter: false

    property int time_pos
    property int time_length

    property alias server_address: config_widget.ip_input_text
    property alias server_port: config_widget.port_input_text

    signal widget_clicked()
    signal play_btn_clicked()
    signal pause_btn_clicked()
    signal stop_btn_clicked()
    signal mute_btn_clicked()
    signal prev_btn_clicked()
    signal next_btn_clicked()
    signal setting_btn_clicked()
    signal list_btn_clicked()
    signal process_slider_value_changed(real value)
    signal volume_slider_value_changed(real value)

    function set_process_percent(value, length) {
        process_slider.percent = value / length
        time_pos = Math.round(value)
        time_length = Math.round(length)
    }

    function exchange_play_and_pause_btn() {
        play_btn.visible = !play_btn.visible
        pause_btn.visible = !pause_btn.visible
    }

    function disvisible_setting_pop_up_menu() {
        setting_pop_up_menu.visible = false
    }

    function set_config_server_visible(visible) {
        config_widget.visible = visible
    }

    MouseArea {
        anchors.fill: parent
        onClicked: widget_clicked()
    }

    ListModel {
        id: setting_pop_up_menu_context
        ListElement {
            name: "Open File"
        }
        ListElement {
            name: "Config Server IP"
        }
    }

    ConfigWidget {
        id: config_widget
        width: 200
        height: 80
        visible: false
    }

    PopMenu {
        id: setting_pop_up_menu
        element_height: 20
        pop_menu_model: setting_pop_up_menu_context
        visible: false
        context_count: setting_pop_up_menu_context.count
        x: setting_btn.x + offsetx + 10
        y: setting_btn.y - height - 10 + offsety
        onMenu_item_clicked: {
            if (index == 0) {
                console.log("open file")
                open_file_dialog.visible = true
            } else if (index == 1) {
                console.log("config server ip")
                config_widget.visible = true
            }
            visible = false
        }
    }

    Button {
        id: setting_btn
        color: parent.color
        width: play_btn.width
        height: play_btn.height
        y: play_btn.y
        x: 1
        normal_image: "../images/setting_normal.png"
        hover_image: "../images/setting_focus.png"
        click_image: "../images/setting_pressed.png"
        onButton_clicked: {
            setting_pop_up_menu.visible = true
        }
    }

    Button {
        id: play_btn
        color: parent.color
        width: 57
        height: 57
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        normal_image: "../images/play_normal.png"
        hover_image: "../images/play_focus.png"
        click_image: "../images/play_pressed.png"
        onButton_clicked: {
            exchange_play_and_pause_btn()
            play_btn_clicked()
        }
    }

    Button {
        id: pause_btn
        x: play_btn.x
        y: play_btn.y
        color: parent.color
        visible: false
        width: play_btn.width
        height: play_btn.height
        normal_image: "../images/pause_normal.png"
        hover_image: "../images/pause_focus.png"
        click_image: "../images/pause_pressed.png"
        onButton_clicked: {
            exchange_play_and_pause_btn()
            pause_btn_clicked()
        }
    }

    Button {
        id: prev_media
        color: parent.color
        width: play_btn.width
        height: play_btn.height
        x: play_btn.x - width - 10
        y: play_btn.y
        normal_image: "../images/forword_normal.png"
        hover_image: "../images/forword_focus.png"
        click_image: "../images/forword_pressed.png"
        onButton_clicked: prev_btn_clicked()
    }

    Button {
        x: prev_media.x - width - 10
        y: play_btn.y
        color: parent.color
        id: stop_btn
        width: play_btn.width
        height: play_btn.height
        normal_image: "../images/stop_normal.png"
        hover_image: "../images/stop_focus.png"
        click_image: "../images/stop_pressed.png"
        onButton_clicked: {
            stop_btn_clicked()
            play_btn.visible = true
            pause_btn.visible = false
            update()
        }
    }

    Button {
        id: next_media
        color: parent.color
        width: play_btn.width
        height: play_btn.height
        x: play_btn.x + play_btn.width + 10
        y: play_btn.y
        normal_image: "../images/next_normal.png"
        hover_image: "../images/next_focus.png"
        click_image: "../images/next_pressed.png"
        onButton_clicked: next_btn_clicked()
    }

    Button {
        id: mute_btn
        property bool is_muted: false
        color: parent.color
        width: play_btn.width
        height: play_btn.height
        x: next_media.x + next_media.width + 10
        y: play_btn.y
        normal_image: "../images/volume1_normal.png"
        hover_image: "../images/volume1_focus.png"
        click_image: "../images/volume1_pressed.png"
        onButton_clicked: {
            is_muted = !is_muted
            if (is_muted) {
                mute_btn.normal_image = "../images/volume0_normal.png"
                mute_btn.hover_image =  "../images/volume0_focus.png"
                mute_btn.click_image = "../images/volume0_pressed.png"
            } else {
                if (volume_slider.slider_value < volume_slider.max_value / 3) {
                    mute_btn.normal_image = "../images/volume1_normal.png"
                    mute_btn.hover_image =  "../images/volume1_focus.png"
                    mute_btn.click_image = "../images/volume1_pressed.png"
                } else if (volume_slider.slider_value < volume_slider.max_value / 3 * 2) {
                    mute_btn.normal_image = "../images/volume2_normal.png"
                    mute_btn.hover_image =  "../images/volume2_focus.png"
                    mute_btn.click_image = "../images/volume2_pressed.png"
                } else {
                    mute_btn.normal_image = "../images/volume3_normal.png"
                    mute_btn.hover_image =  "../images/volume3_focus.png"
                    mute_btn.click_image = "../images/volume3_pressed.png"
                }
            }
            mute_btn_clicked()
        }
    }

    HSlider {
        id: process_slider
        color: parent.color
        x: left_margin
        width: parent.width - right_margin - left_margin
        onSlider_clicked: {
            console.log("process value changed " + process_slider.slider_value)
            process_slider_value_changed(process_slider.slider_value)
        }
    }

    HSlider {
        id: volume_slider
        color: parent.color
//        anchors.horizontalCenter: mute_btn.horizontalCenter
        width: 100
        anchors.verticalCenter: mute_btn.verticalCenter
        x: mute_btn.x + mute_btn.width + 5
        onSlider_valueChanged: {
            if (!mute_btn.is_muted) {
                if (volume_slider.slider_value < volume_slider.max_value / 3) {
                    mute_btn.normal_image = "../images/volume1_normal.png"
                    mute_btn.hover_image =  "../images/volume1_focus.png"
                    mute_btn.click_image = "../images/volume1_pressed.png"
                } else if (volume_slider.slider_value < volume_slider.max_value / 3 * 2) {
                    mute_btn.normal_image = "../images/volume2_normal.png"
                    mute_btn.hover_image =  "../images/volume2_focus.png"
                    mute_btn.click_image = "../images/volume2_pressed.png"
                } else {
                    mute_btn.normal_image = "../images/volume3_normal.png"
                    mute_btn.hover_image =  "../images/volume3_focus.png"
                    mute_btn.click_image = "../images/volume3_pressed.png"
                }

                volume_slider_value_changed(volume_slider.slider_value)
                update()
            }
        }
        visible: true
    }

    Button {
        id: list_btn
        color: parent.color
        width: play_btn.width
        height: play_btn.height
        y: play_btn.y
        x: parent.width - width - 1
        normal_image: "../images/list_normal.png"
        hover_image: "../images/list_focus.png"
        click_image: "../images/list_pressed.png"
        onButton_clicked: list_btn_clicked()
    }

    Rectangle {
        id: time_widget
        Text {
            id: time_widget_text
            text: {
                time_pos + "/" + time_length
            }
        }
        x: parent.width - right_margin - time_widget.width - 30
        y: process_slider.y + 8
    }
}
